<template>
  <div class="col_form">
    <p class="color-666" style="line-height:35px">{{ title }}</p>
    <crop-upload
      v-if="type === 'thirdHot'"
      class="w-100 img_bg"
      show-type="photo"
      :init-val="formData.backgroundImg"
      wrapper-width="359px"
      wrapper-height="215px"
      :img-width="690"
      :img-height="415"
      :photo-width="359"
      :photo-height="215"
      @setVal="(val) => { formData.backgroundImg = val }"
    />
    <crop-upload
      v-if="type === 'bannerCol'"
      class="w-100 img_bg"
      show-type="photo"
      :init-val="formData.backgroundImg"
      wrapper-width="359px"
      wrapper-height="258px"
      :img-width="335"
      :img-height="240"
      :photo-width="359"
      :photo-height="258"
      @setVal="(val) => { formData.backgroundImg = val }"
    />
    <crop-upload
      v-if="type === 'twoColGoods'"
      class="w-100 img_bg"
      show-type="photo"
      :init-val="formData.backgroundImg"
      wrapper-width="359px"
      wrapper-height="305px"
      :img-width="344"
      :img-height="292"
      :photo-width="359"
      :photo-height="305"
      @setVal="(val) => { formData.backgroundImg = val }"
    />
    <div class="input_wrapper">
      <div class="flex name">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>主标题</label>
        <el-input v-model="formData.title" placeholder="请输入主标题" clearable />
      </div>
      <div class="flex name">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>副标题</label>
        <el-input v-model="formData.subtitle" placeholder="请输入副标题" clearable />
      </div>
      <!-- <div class="flex price">
        <label class="flex align-center justify-center"><span class="required-icon">*</span>链接</label>
        <el-input
          placeholder="请输入链接"
          v-model="formData.jumpUrl"
          clearable
        >
        </el-input>
      </div> -->
    </div>
    <template v-if="contentType === 'goods'">
      <goods-link v-for="(item, index) in goodsList" :key="item.goods_id" :goods-data="item" :show-tool="true" @handleDelete="deleteGoods(index)" @upSort="upSort(index)" @downSort="downSort(index)" />
      <div v-if="goodsList.length < goodsNum" class="add-div" @click="openSelect">
        <i class="el-icon-plus" />添加商品({{ goodsList.length }}/{{ goodsNum }})
      </div>
    </template>
    <template v-if="contentType === 'img'">
      <el-row :gutter="20">
        <el-col :span="12">
          <crop-upload class="w-100 img_bg" show-type="photo" :is-square="true" :init-val="goods[0].imgurl" wrapper-width="170px" wrapper-height="170px" :photo-width="170" :photo-height="170" @setVal="(val) => { goods[0].imgurl = val }" />
        </el-col>
        <el-col :span="12">
          <crop-upload class="w-100 img_bg" show-type="photo" :is-square="true" :init-val="goods[1].imgurl" wrapper-width="170px" wrapper-height="170px" :photo-width="170" :photo-height="170" @setVal="(val) => { goods[1].imgurl = val }" />
        </el-col>
      </el-row>
    </template>
    <goods-dialog ref="goodsDialog" :multiple="true" :max-num="goodsNum" :show-checked-tool="true" @setSelect="setSelect" />
  </div>
</template>

<script>
import goodsLink from '../../../recommend/compoments/goodsLink'
import goodsDialog from '@/components/goodsDialog.vue'
import cropUpload from '@/components/cropUpload'
export default {
  components: { goodsLink, goodsDialog, cropUpload },
  props: {
    contentType: {
      type: String,
      default: 'goods'
    },
    goodsNum: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      goodsList: [],
      goods: [
        {
          imgurl: ''
        },
        {
          imgurl: ''
        }
      ]
    }
  },
  methods: {
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
      this.$refs.goodsDialog.selectItems = [...this.goodsList]
    },
    // 设置选中
    setSelect(goodsList) {
      this.goodsList = goodsList
    },
    // 升序
    upSort(index) {
      if (index === 0) {
        return
      }
      const item = this.goodsList[index]
      this.$set(this.goodsList, index, this.goodsList[index - 1])
      this.$set(this.goodsList, index - 1, item)
    },
    // 降序
    downSort(index) {
      if (index === this.goodsList.length - 1) {
        return
      }
      const item = this.goodsList[index]
      this.$set(this.goodsList, index, this.goodsList[index + 1])
      this.$set(this.goodsList, index + 1, item)
    },
    // 删除商品
    deleteGoods(index) {
      this.goodsList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.col_form {
  .input_wrapper {
    margin-top: 10px;
    margin-left: 0;

    &>div {
      label {
        width: 90px;
      }
    }
  }
}
</style>
